<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="imageName" label="图像名称"></el-table-column>

      <el-table-column label="信息">
        <template slot-scope="scope">
              <el-button type="primary" @click="downloadReport(scope.row.imageName)">生成报告</el-button>

        </template>
      </el-table-column>
      <el-table-column prop="finishTime" label="完成时间"></el-table-column>

    </el-table>
  </div>


</template>

<script>
import jsPDF from 'jspdf';
import axios from "axios";

export default {
  name: 'report',
  data() {
    return {
      tableData: [],
    };
  },


  mounted() {
    // 在组件挂载时查询 MySQL 数据库并获取数据
    this.fetchData();
  },

  props: {
    filename: {
      type: String,
      required: true
    }
  },

  methods: {
    fetchData() {
    axios.get('/search_prd')
      .then(response => {
        this.tableData = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },

    downloadReport(fileName) {
      axios.get(`/downloadReport?fileName=${fileName}`, { responseType: "blob" })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", "report.pdf");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((error) => {
          console.error("Error while downloading the report.", error);
        });
    },
    generateReport(fileName) {
      // 获取病人文件名，可以通过接口从后端获取
      const patientFileName = '病人文件名';

      // 创建一个新的jsPDF实例
      const doc = new jsPDF();

      // 添加文本内容
      doc.text('报告标题', 10, 10);
      doc.text('病人文件名：' + patientFileName, 10, 20);

      // 保存或下载报告
      doc.save('report.pdf');
    }
  }
};
</script>
